<template>
  <div class="queryTrips_box">
    <div class="search">
      <!-- 车次详情 -->
      <div class="current-search">
        <div class="station">
          <span>上海</span>
          <i>—</i>
          <span>北京</span>
        </div>
        <div class="date">
          <span>2020年01月01日</span>
          <span>(共47个车次)</span>
        </div>
      </div>
      <!-- 城市查询 -->
      <div class="search-form">
        <!--出发城市-->
        <el-form :model="Trainform"
                 :rules="searchRules"
                 :inline="true"
                 ref="Trainform"
                 label-width="110px">
          <!-- 出发城市 -->
          <el-form-item label="出发城市"
                        style="font-weight: bolder;"
                        prop="formStation">
            <el-input v-model="Trainform.formStation"
                      placeholder="城市名/车站名"
                      style="width:200px"
                      clearable></el-input>
          </el-form-item>
          <!-- 转换图标 -->
          <span class="iconfont icon-zhuanhuan"></span>
          <!-- 到达城市 -->
          <el-form-item label="到达城市"
                        style="font-weight: bolder;"
                        prop="toStation">
            <el-input v-model="Trainform.toStation"
                      placeholder="城市名/车站名"
                      style="width:200px"
                      clearable></el-input>
          </el-form-item>
          <!-- 出发日期 -->
          <el-form-item label="出发日期"
                        style="font-weight: bolder;"
                        prop="formDate">
            <el-date-picker style="width:200px"
                            v-model="Trainform.formDate"
                            align="right"
                            type="date"
                            placeholder="选择出发日期"
                            :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <!--搜索按钮-->
          <el-form-item>
            <el-button type="primary"
                       @click="SerachBtn">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- /*车次类型过滤*/ -->
    <div class="filter-box">
      <ul>
        <li v-for="(filter,index) in filterForm"
            :key="filter.id">
          <span style="font-size: 20px;font-weight: bolder;">{{filter.title}}</span>

          <el-button :type="ckData[filter.id]?(ckData[filter.id].length==0?'primary':''):'primary'"
                     @click="buxiangBtn">{{filter.btn}}</el-button>

          <span v-for="(ck,index2) in filter.ckBox"
                :key="ck.id">
            <el-checkbox label=""
                         :checked="ck.isCk"
                         @change="ckBoxClick(filter.id,ck.id)">{{ck.label}}</el-checkbox>
          </span>
          <!-- <el-checkbox label="fliter.type" name="type"></el-checkbox>
      <el-checkbox label="D-动车" name="type"></el-checkbox>
      <el-checkbox label="普通车型" name="type"></el-checkbox> -->

        </li>

      </ul>
      <el-link class="clearFilters">清除筛选条件</el-link>
      <el-link class="putAwayFilters">收起筛选条件
        <i class="el-icon-caret-top"></i>
      </el-link>
    </div>
    <!-- 车次列表 -->
    <div class="train-list">
      <el-table :data="TrainItem"
                style="width: 100%">
        <el-table-column label="车次"
                         width="240"
                         header-align="center"
                         align="center">
          <template slot-scope="train">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px ;font-weight: bolder;font-size:17px;">{{ train.row.TrainNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="始末站"
                         width="240"
                         header-align="center"
                         align="center">
          <template slot-scope="train">
            <!-- <i class="el-icon-time"></i> -->
            <i class="k-start"></i>
            <p style="margin-left: 10px">{{ train.row.FromStation }}</p>
            <p style="margin-left: 10px">{{ train.row.ToStation }}</p>
          </template>
        </el-table-column>
        <el-table-column label="出发/到达时间"
                         width="240"
                         header-align="center"
                         align="center">
          <template slot-scope="train">
            <p style=" font-weight: bolder;font-size:17px;"><i class="el-icon-time"></i>{{ train.row.FromTime }}</p>
            <p style=""><i class="el-icon-time"></i>{{ train.row.ToTime }}</p>
          </template>
        </el-table-column>

        <el-table-column label="耗时"
                         width="240"
                         header-align="center"
                         align="center">
          <template slot-scope="train">
            <p style="margin-left: 10px"><i class="el-icon-time"></i>{{ train.row.UsedMinutes }}</p>
          </template>
        </el-table-column>

        <el-table-column label="参考票价"
                         width="280"
                         header-align="center"
                         align="center">
          <template slot-scope="train">

            <span style="margin-left: 25px;font-weight: bolder;font-size:17px;"></i>{{ train.row.SeatName }}</span>
            <span style="margin-left: 25px;color:#ff6a00; font-weight: bolder;font-size:17px;"></i>￥{{ train.row.Price }}</span>
            <span style="margin-left: 25px"></i>余<var style="color:#ff6a00;">{{ train.row.SeatCnt }}</var>张</span>

          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="260"
                         header-align="center"
                         align="center">
          <template slot-scope="train">
            <span>
              <el-button type="primary"
                         size="mini">{{train.row.book}}</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>
</template>

<script>
export default {
  name: 'queryTrips',
  components: {},
  data () {
    return {
      TrainItem: [
        { TrainNo: 'G1304', FromStation: '广州南', ToStation: '上海虹桥', FromTime: '13.24', ToTime: '21.24', UsedMinutes: '8小时20分', SeatName: '硬座', Price: ' 2492.5', SeatCnt: '99', book: '预定' }
      ],
      // checkList:[],
      //checkbox选择框
      ckData: {},
      // 车次过滤表单
      filterForm: [
        {          id: 1, title: '车次类型', btn: '不限', ckBox: [
            { isCk: false, id: 101, label: 'G/C-高铁' },
            { isCk: false, id: 102, label: 'D-动车' },
            { isCk: false, id: 103, label: '普通车型' }

          ]        },
        {          id: 2, title: '出发站台', btn: '不限', ckBox: [
            { isCk: false, id: 201, label: '上海虹桥' },
            { isCk: false, id: 202, label: '上海站' },
            { isCk: false, id: 203, label: '上海南站' }

          ]        },
        {          id: 3, title: '到达车站', btn: '不限', ckBox: [
            { isCk: false, id: 301, label: '北京南站' },
            { isCk: false, id: 302, label: '北京站' }
          ]        },
        {          id: 4, title: '是否有票', btn: '不限', ckBox: [
            { isCk: false, id: 401, label: '只看有票' }
          ]        }
      ],
      //查询表单
      Trainform: {
        formStation: '',
        toStation: '',
        formDate: ''
      },
      // 验证
      searchRules: {
        formStation: [
          { required: true, message: '请输入出发城市', trigger: 'blur' },

        ],
        toStation: [
          { required: true, message: '请输入到达城市', trigger: 'blur' }
        ],
        formDate: [
          { type: 'date', required: true, message: '请选择出发日期', trigger: 'change' }
        ]
      },
      // 出发日期事件
      pickerOptions: {

        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },
  methods: {
    //查询按钮
    SerachBtn (Trainform) {
      this.$refs[Trainform].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //不限按钮
    buxiangBtn () {
      this.ckData = []

      this.$forceUpdate()
    },
    //复选框点击事件
    ckBoxClick (ckId1, ckId2) {
      if (this.ckData[ckId1]) {
        let a = this.ckData[ckId1]
        if (a.includes(ckId2)) {
          console.log('ckId2', ckId2)
          // console.log("22222",this.ckData[ckId1])
          // this.ckData[ckId1].remove(ckId2)
          for (let i = 0; i < a.length; i++) {
            const element = a[i];
            if (element == ckId2) {
              this.ckData[ckId1].splice(i, 1)
              console.log('element', element)
              break
            }
          }
        }
        else {
          this.ckData[ckId1].push(ckId2)
        }
      }
      else {
        this.ckData[ckId1] = [ckId2]
      }
      this.$forceUpdate()
      console.log("this.ckData", this.ckData)
    }
  }
}
</script>

<style scoped >
.queryTrips_box {
  width: 1500px;
  margin: 0 auto;
  background-color: #f8f8f8;
}
/*查询*/
.search {
  width: 100%;
  height: 90px;
  background: #d3dce6;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.search .current-search {
  float: left;
  width: 239px;
  height: 65px;
  overflow: hidden;
  padding-top: 20px;
  padding-left: 21px;
  position: relative;
  border-right: 1px solid white;
}
/*车站*/
.search .current-search .station {
  font-size: 20px;
  color: #333;
  height: 25px;
  line-height: 25px;
  font-weight: bolder;
}
/* //查询出发城市 */
.search-form {
  /* border: 1px solid red; */
  line-height: 90px;
  width: 1231px;
  float: left;
}

.el-input {
  line-height: 90px;
}
/* 转换图标 */
.icon-zhuanhuan {
  color: cornflowerblue;
  font-size: 30px;
  margin-left: 15px;
}
.el-button {
  width: 100px;
  margin-left: 30px;
  margin-top: 24px;
}
/* 车次过滤 */
.filter-box,
.train-list {
  width: 100%;
  padding-bottom: 15px;
  background-color: #e9eef3;
}
.filter-box ul {
  width: 1200px;
}
.filter-box ul li {
  list-style: none;
}
.filter-box ul li .el-button {
  margin-right: 30px;
}

.el-checkbox {
  font-size: 20px;
  margin-left: 30px;
  font-weight: bolder;
}
/* 清楚筛选条件 */
.clearFilters {
  float: right;
  right: 40px;
  top: -260px;
  font-size: 20px;
  color: dodgerblue;
}
/* 收起筛选条件 */
.putAwayFilters {
  float: right;
  left: 70px;
  top: -50px;
  font-size: 20px;
  color: dodgerblue;
}

/*车次列表*/
.train-list .el-table {
  margin-top: 20px;
}
</style>

